<template>
    <div class="detailOfDaily" v-loading="tableLoading">
        <!-- 按日贷明细查询 -->
        <cardComponent pageTitle="按日贷明细查询">
            <template slot="cardBody">
                <div class="detailOfDailyMain">
                    <el-form :model="searchForm" label-width="80px" size="small">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                                    <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                                    <el-input v-model="searchForm.mainCardNo" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item
                                    label="分期付款类型:"
                                    label-position="left"
                                    prop="label"
                                    label-width="110px"
                                >
                                    <el-select placeholder v-model="searchForm.label" clearable>
                                        <el-option
                                            :label="searchForm.label"
                                            :value="searchForm.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-button
                                    type="primary"
                                    size="small"
                                    icon="el-icon-search"
                                    @click="handleSearch"
                                >查询</el-button>
                                <el-button
                                    type="primary"
                                    icon="el-icon-refresh-right"
                                    size="small"
                                >重置</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="dialogVisible">
                    <el-table
                        :data="tableData"
                        class="heard-bg business_table"
                        width="100%"
                        border
                        stripe
                        highlight-current-row
                        @row-click="handleCurrent"
                    >
                        <el-table-column label="分期付款申请编号" prop="APPREF"></el-table-column>
                        <el-table-column label="申请录入日期" prop="INPDATE">
                            <template slot-scope="scoped">
                                <span>{{ scoped.row.INPDATE | getDataTime}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="商品编号" prop="PRPRDID"></el-table-column>

                        <el-table-column label="商品名称" prop="PRONAME"></el-table-column>

                        <el-table-column label="商品金额" prop="MPAMT">
                            <template slot-scope="scoped">{{ scoped.row.MPAMT.toFixed(2) }}</template>
                        </el-table-column>

                        <el-table-column label="分期期数" prop="NBRMTHS"></el-table-column>

                        <el-table-column label="状态" prop="STATUS">
                            <template slot-scope="scope">
                                <span>{{ scope.row.STATUS | getStatusText }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="申请分期付款类型" prop="REVSERV"></el-table-column>

                        <el-table-column label="授权日期" prop="AUTHDAY">
                            <template slot-scope="scoped">
                                <span>{{ scoped.row.AUTHDAY | getDataTime}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="请款日期" prop="MATCHDAY">
                            <template slot-scope="scoped">
                                <span>{{ scoped.row.MATCHDAY | getDataTime}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="footer">
                        <el-button type="primary" plain size="small" @click="detailDaily">按日贷明细查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('pre')"
                            :disabled="currentApprefIndex <= 0"
                        >上一页</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('next')"
                            :disabled="!nextButtonFlag"
                        >下一页</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import { INSTALMENT_SEARCH_STATUS } from '@/utils/Contants';
import { getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'detailOfDaily',
    components: {
        cardComponent,
    },
    data() {
        return {
            // 页面loading
            tableLoading: false,
            radioData: 2,
            tableData: [],
            keyTypeList: [],
            searchForm: { // 搜索表单字段
                mainCardNo: '',
                label: '按日还贷',
            },
            apprefList: [], // 分期付款申请编号(只存每页最后一条记录)
            currentApprefIndex: 0, // 当前页最后一条记录的申请编号的索引
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            accountType: '',
            currentSelect: '', // 点击每一行信息
        };
    },
    filters: {
        // 状态
        getStatusText(val) {
            let text = '';
            INSTALMENT_SEARCH_STATUS.forEach((item) => {
                if (item.value === val) {
                    text = item.label;
                }
            });
            return text;
        },
        // 时间处理
        getDataTime(date) {
            let Date = '';
            if (date.trim()) {
                Date = moment(`${date}`).format('YYYY-MM-DD');
            }
            return Date;
        },
    },
    async mounted() {
        this.searchForm.mainCardNo = this.cardInfo_3004.CARDNO;
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 点击查询
        handleSearch() {
            this.apprefList = [];
            this.currentApprefIndex = 0;
            this.dialogTable();
        },

        // 按日贷明细查询 -- 3046交易
        dialogTable() {
            this.tableLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                PIN: '123456', // 密码
                RTNIND: this.apprefList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                APPREF: this.apprefList.length === 0 ? '' : this.apprefList[this.currentApprefIndex], // 首次查询上送空；下翻页查询时 上送最后一条记录中的分期付款申请编号；
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3046';
            defaultParams.body.appBody = appBody;
            // 3046交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.tableLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 111111);
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody.dataList || [];
                        // 判断此次查询数据最后一条记录申请编号是否在已有列表中  没有- 添加
                        const currentAppref = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].APPREF;
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                        if (!this.apprefList.includes(currentAppref)) {
                            this.apprefList.push(currentAppref);
                            // 保存 当前页最后一条记录的申请编号的索引
                            this.currentApprefIndex = this.apprefList.length - 1;
                        } else { // 已存在
                            this.apprefList.forEach((item, index) => {
                                if (item === currentAppref) {
                                    this.currentApprefIndex = index;
                                }
                            });
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },
        handleCurrent(row) {
            this.currentSelect = row;
        },
        // 点击按日贷明细查询
        detailDaily() {
            if (this.currentSelect.length === 0) {
                this.$alert('请选择记录列表', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            } else {
                const APPREF = this.currentSelect.APPREF.trim();
                this.$router.push({ name: 'dailyBasis', path: '/instalment/dailyBasis', params: { APPREF } });
            }
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.apprefList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.dialogTable();
            } else { // 切换到下一页
                this.dialogTable();
            }
        },
    },
};
</script>

<style lang='scss'>
.detailOfDaily {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;

    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }

        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    //主体内容
    .detailOfDailyMain {
        width: 100%;
        .el-row {
            .el-col {
                text-align: left;
                color: #333;
                display: flex;
                line-height: 34px;
                font-size: 14px;
                .mainRight {
                    margin-left: 10px;
                }
                .el-form-item {
                    /* margin-bottom: 22px; */
                    width: 100%;
                }
            }
        }
    }
}
.dialogVisible {
    margin-top: 20px;
    .el-col {
        text-align: left;
    }
    .footer {
        text-align: right;
        margin-top: 30px;
    }
}
</style>
